.revision-selector {
  background: $studio-simplenote-blue-50;
  padding: 10px 20px 20px 20px;
  color: $studio-white;
  z-index: 1000;
  height: 114px;
  transition: all 0.3s ease-in-out;

  &.is-visible {
    top: 0;
  }

  @media only screen and (max-width: $single-column) {
    width: 100%;
  }

  .revision-buttons {
    display: flex;
    justify-content: center;

    button {
      @extend %smart-focus-outline;
    }
  }

  .button-primary {
    background: $studio-white;
    color: $studio-simplenote-blue-50;
    border-color: $studio-white;

    &:active {
      background: $studio-simplenote-blue-5;
      border-color: $studio-simplenote-blue-5;
    }
  }

  .button-secondary {
    border-color: $studio-white;
    color: $studio-white;
    margin-right: 10px;

    &:active {
      background: $studio-white;
      color: $studio-simplenote-blue-50;
    }
  }

  .revision-slider {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .revision-date {
    width: 100%;
    color: $studio-white;
    text-align: center;
    margin-bottom: 10px;
  }
}

.is-focus-mode .revision-selector {
  width: 100%;
}
